import type { Value } from '@udecode/plate';

import { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';
import {
    type PlateLeafProps,
    Plate,
    PlateLeaf,
    usePlateEditor,
} from '@udecode/plate/react';

import { Editor, EditorContainer } from '@/components/ui/editor';
import { FixedToolbar } from '@/components/ui/fixed-toolbar';
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';

const initialValue: Value = [
    {
        type: 'p',
        children: [
            { text: 'Hello! Try out the ' },
            { text: 'bold', bold: true },
            { text: ', ' },
            { text: 'italic', italic: true },
            { text: ', and ' },
            { text: 'underline', underline: true },
            { text: ' formatting.' },
        ],
    },
];

export default function App() {
    const editor = usePlateEditor({
        plugins: [BasicMarksPlugin], // Add the marks plugin
        value: initialValue,         // Set initial content
        components: {                // Map mark keys to components
            bold: (props: PlateLeafProps) => <PlateLeaf {...props} as="strong" />,
            italic: (props: PlateLeafProps) => <PlateLeaf {...props} as="em" />,
            underline: (props: PlateLeafProps) => <PlateLeaf {...props} as="u" />,
        },
    });

    return (
        <Plate editor={editor}>
            <FixedToolbar className="justify-start rounded-t-lg">
                <MarkToolbarButton nodeType="bold" tooltip="Bold (⌘+B)">B</MarkToolbarButton>
                <MarkToolbarButton nodeType="italic" tooltip="Italic (⌘+I)">I</MarkToolbarButton>
                <MarkToolbarButton nodeType="underline" tooltip="Underline (⌘+U)">U</MarkToolbarButton>
            </FixedToolbar>
            <EditorContainer>
                <Editor placeholder="Type your amazing content here..." />
            </EditorContainer>
        </Plate>
    );
}
